<style lang="scss">
  .shop-goods-table-detail {
    width: 100%;
    background-color: transparent;
    border: none;
    td, tr {
      border: none;
      background-color: transparent;
    }

    .goods-span-td {
      span {
        display: inline-block;
        margin-right: 10px;
      }
    }
    .el-upload-list--picture-card .el-upload-list__item {
      margin: 0;
    }
  }
</style>
<template>
  <el-row>
    <el-col :span="24">
      <Portlet title="商品管理">
        <el-form ref="searchForm" class="el-form-col el-form-search" :model="search">
          <el-row :gutter="15">
            <el-col :lg="4" :md="6">
              <el-form-item prop="productName">
                <el-input v-model="search.productName" placeholder="商品名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="mallProductNo">
                <el-input v-model="search.mallProductNo" placeholder="商品编号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="productState">
                <el-select v-model="search.productState" clearable placeholder="商品状态">
                  <el-option label="下架" :value="0"></el-option>
                  <el-option label="上架" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </Portlet>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-warehouse-store/product/get-product-list"
        @selection-change="setRows"
        :createGet="false"
        :columns="columns">

        <template slot="buttons">
          <el-button type="primary" @click.prevent="create">新增商品</el-button>
          <el-button type="primary" @click.prevent="closeOrOpen(false, 1)">上架</el-button>
          <el-button type="primary" @click.prevent="closeOrOpen(false, 0)">下架</el-button>
          <el-button type="danger" @click.prevent="del(false)">删除</el-button>
        </template>

        <template slot="preColumn">
          <el-table-column min-width="800px" align="center" label="商品详情">
            <template slot-scope="scope">
              <table class="shop-goods-table-detail">
                <tbody>
                <tr>
                  <td rowspan="6" width="200">
                    <upload-image showPictureNum :value="getImageArr(scope.row)" readonly></upload-image>
                  </td>
                </tr>
                <tr>
                  <td>
                    {{ scope.row.productName }}
                  </td>
                </tr>
                <tr>
                  <td>商品编号：{{ scope.row.mallProductNo }}</td>
                </tr>
                <tr>
                  <td class="goods-span-td">
                    <span>厂家名称：{{ scope.row.manufacturersName }}</span>
                    <span>类别：{{ scope.row.bigClass }}—{{ scope.row.middleClass}}</span>
                    <span>厂家产品编号：{{ scope.row.productNo }}</span>
                    <span>规格：{{ scope.row.standard }}</span>
                  </td>
                </tr>
                <tr>
                  <td>单位： {{ scope.row.unit }}</td>
                </tr>
                <tr>
                  <td>售价： <span class="font-red">{{ scope.row.price }}</span> 元</td>
                </tr>
                </tbody>
              </table>
            </template>
          </el-table-column>
        </template>

        <template slot="column">

          <el-table-column align="center" width="120px" label="关联门店">
            <template slot-scope="scope">
              <div :key="index" v-for="(item, index) in scope.row.mallShopInfos || []">
                {{ item.shopName }}
              </div>
            </template>
          </el-table-column>

          <el-table-column fixed="right" align="center" width="120px" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="edit(scope.row)"
              >
                修改
              </el-button>

              <el-button
                size="mini"
                type="text"
                @click="del(scope.row)"
              >
                删除
              </el-button>

              <el-button
                size="mini"
                type="text"
                @click.prevent="closeOrOpen(scope.row)"
              >
                <span v-if="scope.row.productState == 1">下架</span>
                <span v-if="scope.row.productState == 0">上架</span>
              </el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {decimalNumFilter, filterDataBaseDictionary} from '@/filters'
import {copy, confirm, alert} from '@/utils'

export default {
  name: 'shopGoods',
  filters: {
    decimalNumFilter,
    filterDataBaseDictionary
  },
  data() {
    return {
      searchLoading: false,
      search: {
        productName: '',
        mallProductNo: this.$route.query.mallProductNo || '',
        productState: ''
      },
      showCreateModal: false,
      isOpen: false,
      columns: [
        {
          label: '状态',
          data: 'productState',
          render: (data) => {
            switch (parseInt(data)) {
              case 0:
                return '下架'
              case 1:
                return '上架'
              default:
                return '未知'
            }
          }
        }
      ],
      item: {},
      rows: []
    }
  },
  mounted() {
    this.searchFunc(this.search)
  },
  methods: {
    searchFunc(search) {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(search)
        delete params.addressArr
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    },
    // 选中的值
    setRows(rows) {
      this.rows = rows
    },
    show(data) {
      console.log('show', data)
    },
    // 修改
    edit(data) {
      this.$router.push({path: '/redirect/ss-oms/shop/goods/edit/' + data.id})
    },
    // 新增
    create() {
      this.$router.push({path: '/redirect/ss-oms/shop/goods/create'})
    },
    // 上下架商品
    closeOrOpen(row, state) {
      let productState = ''
      let data = {}
      if (row) {
        productState = parseInt(row.productState)
        productState = productState ? 0 : 1
        data.ids = [row.id]
      } else {
        data.ids = this.rows.map(v => v.id)
        if (data.ids.length === 0) {
          alert('请选择商品')
          return
        }
        productState = state
      }
      data.productState = productState
      if ([0, 1].indexOf(productState) >= 0) {
        confirm(data.productState ? '是否上架商品' : '是否下架商品', '提示', {
          confirmButtonLoading: true,
          dangerouslyUseHTMLString: true,
          showCancelButton: true,
          confirmCallBack: ({confirmButtonLoadingClose, close}) => {
            this.$ajax.post('/ms-warehouse-store/product/update-productState', data).then(response => {
              if (response.success) {
                close().then(_ => {
                  confirm('操作成功')
                })
                this.refresh()
              }
              confirmButtonLoadingClose()
            }).catch(_ => {
              confirmButtonLoadingClose()
            })
          }
        })
      } else {
        alert('当前商品状态不正常')
      }
    },
    del(row) {
      let data = {}
      if (row) {
        data.ids = [row.id]
      } else {
        data.ids = this.rows.map(v => v.id)
        if (data.ids.length === 0) {
          alert('请选择商品')
          return
        }
      }
      confirm('确定要删除此商品', '提示', {
        confirmButtonLoading: true,
        dangerouslyUseHTMLString: true,
        showCancelButton: true,
        confirmCallBack: ({confirmButtonLoadingClose, close}) => {
          this.$ajax.post('/ms-warehouse-store/product/delete-product', data).then(response => {
            if (response.success) {
              close().then(_ => {
                confirm('操作成功')
              })
              this.refresh()
            }
            confirmButtonLoadingClose()
          }).catch(_ => {
            confirmButtonLoadingClose()
          })
        }
      })
    },
    // 获取图片数组
    getImageArr(row) {
      const picture = row.picture
      if (picture && typeof picture === 'string') {
        return picture.split(',')
      }
      return []
    }
  }
}
</script>
